<template>
  <div class="articles">
    <!-- 左边点赞信息 -->
    <div class="clickdianzan-info">
      <div class="info-one">
        <div class="content-footer-poster">
          <button data-title="海报分享" class="poster-span b2tooltipbox">
            <i
              class="infoicon iconfont icon-zhuanfa"
              style="font-size: 25px;"
            ></i>
            <b class="mobile-show">海报分享</b>
          </button>
          <button
            data-title="去评论"
            class="mobile-hidden b2tooltipbox comment-span"
          >
            <i
              class="infoicon iconfont icon-xinxi"
              style="font-size: 25px;"
            ></i>
          </button>
          <button data-title="收藏" class="text favorite-button b2tooltipbox">
            <i
              class="infoicon iconfont icon-shoucang"
              style="font-size: 25px;"
            ></i>
            <b class="mobile-show">收藏</b>
          </button>
          <button
            @click="articleClick(articleContentData.article.artId)"
            data-title="点赞"
            class="text favorite-button b2tooltipbox"
          >
            <i
              ref="thumbers"
              class="infoicon iconfont icon-aixin"
              style="font-size: 25px;"
              data_d="0"
            ></i>
            <b class="mobile-show">点赞</b>
          </button>
        </div>
      </div>
    </div>

    <!-- 文章内容 -->
    <div class="showArticle-content">
      <div class="left-content">
        <!-- 博文头部 -->
        <div class="entry-header">
          <!--博文标题-->
          <h1>{{ articleContentData.article.artTitle }}</h1>
          <div id="post-meta">
            <div class="post-meta-row">
              <ul class="post-meta">
                <li>
                  <!-- 博文分类-->
                  <div class="post-list-cat">
                    <a
                      target="__blank"
                      href="#"
                      class="post-list-cat-item b2-radius"
                      style="color: rgb(96, 125, 139)"
                      v-for="(item, index) in articleContentData.article
                        .documentTypes"
                      :key="index"
                    >
                      {{ item.docName }}</a
                    >
                  </div>
                </li>
                <li class="single-date">
                  <span>
                    <time itemprop="datePublished" class="b2timeago">{{
                      articleContentData.article.artTime
                    }}</time>
                  </span>
                </li>
                <li class="single-like">
                  <span>
                    <i class="iconfont icon-aixin"> </i>
                    <b>{{ articleContentData.article.artThumbsSize }}</b>
                  </span>
                </li>
                <li class="single-eye">
                  <span>
                    <i class="iconfont icon-icon"> </i>
                    <b style="margin-left: 2px; line-height: 15px">{{
                      articleContentData.article.artBrowseSize
                    }}</b>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 博文描述 -->
        <div class="content-excerpt">
          {{ articleContentData.article.artDescribe }}
        </div>
        <!-- 博文内容 -->
        <div
          class="entry-content"
          v-html="articleContentData.article.artContent"
        ></div>
         <!-- 下方评论 -->
      <div class="write-comment-content">
        <Comments :artId="articleContentData.article.artId"></Comments>
      </div>
      <!-- 评论信息展示 -->
      <div class="show-comments" v-if="articleContentData.commentSize !=0">
        <ShowComment
          :commentDatas="articleContentData.commentDatas"
          :commentSize="articleContentData.commentSize"
        ></ShowComment>
      </div>
      </div>
     
      <!-- 右边信息 -->
      <div class="right-content">
        <div class="right-write-info">
          <WriteInfo :uId="uId"></WriteInfo>
        </div>
        <div class="weather-info" style="width: 100%; margin-top: 25px">
          <Weather></Weather>
        </div>
        <div class="paihangbang" style="width: 100%; margin-top: 25px">
          <rank></rank>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WriteInfo from "../rotation/writeinfo.vue";
import Weather from "../weacher/weacher.vue";
import Rank from "../ranking/ranking.vue";
import Comments from "../comments/comments.vue";
import ShowComment from "../comments/showComments.vue";
import axios from "axios";
import pubsub from "pubsub-js";
export default {
  name: "ShowArticlejiagou",
  components: {
    WriteInfo,
    Weather,
    Rank,
    Comments,
    ShowComment,
  },
  data() {
    return {
      articleContentData: {},
      uId: 0,
      artId: 0,
    };
  },
  mounted() {
    this.uId = this.$store.state.user;
    this.absa();
    setTimeout(() => {
           this.chickArticleThumbs();
    }, 200);
 
    this.pub = pubsub.subscribe("leave", (nsgName, data) => {
      this.absa();
    });
  },
  methods: {
    absa() {
      const artId = this.$route.params.artId;
      var that = this;
      axios
        .get("/aabbcc/article/selectArticleById/" + artId)
        .then(function (response) {
          that.articleContentData = response.data.obj;
          that.artId = response.data.obj.article.artId;
          that.uId = response.data.obj.article.user.userId
        });
    },
    //查看用户是否点赞
    chickArticleThumbs() {
      if (this.artId != 0 && this.uId != 0) {
        // //发送请求查询用户是否为博文点赞
        const that = this;
        axios
          .get(
            "/aabbcc/articleThumbsSize/selectArtThumdsInfo/" +
              that.artId +
              "/" +
              that.uId
          )
          .then(function (response) {
            if (response.data.code == 200) {
              if (response.data.obj != null) {
                //点过赞
                  that.$refs.thumbers.setAttribute("data_d", 1);
                that.$refs.thumbers.style.color = "red";
              } else {
                that.$refs.thumbers.setAttribute("data_d", 0);
                that.$refs.thumbers.style.color = "rgb(108, 110, 114)";
              }
            }
          })
          .catch(function (err) {
            that.open4("代码跑丢了");
          });
      }
    },
    //博文点赞
    articleClick(item) {
      const that = this;
      //判断用户是否登录
      if (
        this.uId == 0 ||
        this.uId == null ||
        this.uId == "" ||
        typeof this.uId == "undefined"
      ) {
        alert(11111);
      } else {
        // //发送axios查询用户信息
        if (item != 0 || item != null || item != "") {
          //拿到点赞的状态
          var data_d = this.$refs.thumbers.getAttribute("data_d");
          if (data_d == 0) {
            //表示没点赞
            //添加博文点赞
            axios
              .get(
                "/aabbcc/articleThumbsSize/onArtThumbsSize/" +
                  item +
                  "/" +
                  that.uId
              )
              .then(function (response) {
                if (response.data.code == 200) {
                  that.open2("谢谢你的点赞");
                  that.$refs.thumbers.setAttribute("data_d", 1);
                  that.$refs.thumbers.style.color = "red";
                }
              })
              .catch(function () {
                that.open4("代码跑丢了");
              });
          } else if (data_d == 1) {
            //代表取消点赞
            axios
              .get(
                "/aabbcc/articleThumbsSize/outArtThumbsSize/" +
                  item +
                  "/" +
                  that.uId
              )
              .then(function (response) {
                if (response.data.code == 200) {
                  that.open2("下次记得点赞哟~~");
                  that.$refs.thumbers.setAttribute("data_d", 0);
                  that.$refs.thumbers.style.color = "rgb(108, 110, 114)";
                }
              })
              .catch(function () {
                that.open4("代码跑丢了");
              });
          }
        } else {
          this.open4("代码跑丢了");
        }
      }
    },
    open4(message) {
      //错误提示框
      this.$message({
        showClose: true,
        message: message,
        type: "error",
      });
    },
    open2(message) {
      //成功提示框
      this.$message({
        showClose: true,
        message: message,
        type: "success",
      });
    },
  },
};
</script>

<style scoped>
/* 右边展示信息 */
.right-write-info {
  width: 100%;
  border-bottom: 1px solid #ebeef5;
  position: relative;
}
.infoicon{
  color: rgb(108, 110, 114);
}



/* 左边点赞信息 */
.clickdianzan-info {
  width: 49px;
  height: 281px;
  /* background: #2882c5; */
  position: absolute;
  left: 143px;
  position: fixed;
}
.info-one {
  width: 100%;
}
.content-footer-poster button b {
  font-weight: 400;
}
.mobile-show {
  display: none;
}
.content-footer-poster button {
  color: #6c6e72;
  margin-right: 0;
  margin-bottom: 20px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0px;
  text-align: center;
  display: block;
  border-radius: 100%;
  box-shadow: 0 4px 16px 0 rgb(13 39 91 / 6%);
  background: #fff;
  color: inherit;
  transition: all 0.5s;
}
.content-footer-poster button:hover {
  transition: all 0.5s;
  transform: scale(1) translateY(-2px) translateZ(5px) !important;
  background: #f1f2f3;
}

.articles {
  width: 100%;
  height: 100%;
  position: relative;
  /* top: -107px; */
}
.showArticle-content {
  width: 78.9%;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 80px;
  display: flex;
      justify-content: space-between;
}

.showArticle-content .left-content {
  width: 80%;
  height: 100%;
  background: #fff;
  border-radius: 10px;
      margin-bottom: 40px;
}
/* 博文头部 */
.entry-header {
  width: 94%;
  margin: 0 auto;
  /* margin-bottom: 20px; */
  border-bottom: 1px solid #f5f6f7;
  padding-bottom: 20px;
  margin-top: 30px;
}
.showArticle-content h1 {
  font-size: 26px;
  font-weight: 600;
  line-height: 36px;
  margin-bottom: 12px;
}
.entry-header .post-meta {
  justify-content: initial;
}

.post-meta,
.post-meta-left {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}
.post-meta li {
  margin-right: 24px;
  list-style: none;
  cursor: pointer;
}
.post-list-cat {
  font-size: 12px;
  border-radius: 20px;
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  flex-flow: wrap;
}
.entry-header .post-list-cat a {
  height: 30px;
  line-height: 30px;
  padding: 0 16px;
  font-weight: 500;
  display: block;
  margin-right: 10px;
  float: left;
  background-color: rgba(40, 130, 197, 0.1);
  color: #2882c5;
  border-radius: 20px;
}
.post-list-cat a:first-child {
  display: block;
}
.post-meta li span {
  margin: 0;
  color: #8590a6;
  margin-left: 0;
  margin-right: 10px;
  display: flex;
  line-height: 1;
  transition: all 0.5s;
}
.post-meta li > span:hover {
  transition: all 0.5s;
  transform: scale(1) translateY(-2px) translateZ(5px) !important;
  color: #2882c5;
}
.post-meta > li:nth-child(1) {
  transition: all 0.5s;
}
.post-meta > li:nth-child(1):hover {
  transition: all 0.5s;
  transform: scale(1) translateY(-2px) translateZ(5px) !important;
}
.b2timeago {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 博文描述 */
.content-excerpt {
  width: 94%;
  margin: 0 auto;
  margin-bottom: 40px;
  line-height: 1.5;
  position: relative;
  font-size: 16px;
  font-style: initial;
  font-family: "思源宋体 CN SemiBold", SimSun, fangsong;
  color: rgb(121, 124, 128);
  border-radius: 20px;
  padding: 20px;
  background: rgb(245, 246, 247);
}
 pre {
      font-size: 17px;
      background-color: #2b3a42;
      overflow-x: auto;
      padding: 16px;
      color: #abb2bf;
      display: -webkit-box;
      font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
      -webkit-overflow-scrolling: touch;
      padding-top: 15px;
      background: #282c34;
      border-radius: 5px;
      box-shadow: 0px 0px 13px 0px #a39797;
      margin-top: 20px;
      margin-bottom: 20px;
    }
/* 博文内容 */
.entry-content {
  width: 94%;
  margin: 0 auto;
  padding-bottom: 20px;
}
/* 写评论 */
.write-comment-content {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  margin-top: 25px;
  float: left;
}
/* 评论信息展示  */

.show-comments {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  margin-top: 25px;
  float: left;
}

.showArticle-content .right-content {
  width: 19%;

  border-radius: 10px;

}
</style>